/**
 * Created by hejiawei
 * File: Oss.js.js
 * Date: 2022/3/4 5:36 PM
 * Contact: 191675134@qq.com
 * Software: PyCharm
 */
import React, { Component, Fragment } from "react";
// antd
import { Button } from "antd";
import Action from "@c/buttonAction/Index";
// table 组件
import TableComponent from "@c/tableData/Index";
import OssModal from "./components/OssModal";
import { Tooltip } from "antd";
import { InfoCircleOutlined } from '@ant-design/icons';

class OssList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            // flag
            flag: false,
            // 请求参数
            PageNumber: 1,
            PageSize: 10,
            keyWork: "",
            // 表头
            tableConfig: {
                url: "ossList",
                method: "get",
                checkbox: true,
                thead: [
                    { title: "账号名称", dataIndex: "account", key: "account" },
                    {
                        title: "所属平台",
                        dataIndex: "platform",
                        key: "platform",
                    },
                    {
                        title: "bucket名称",
                        dataIndex: "bucket_name",
                        key: "bucket_name",
                    },
                    { title: "bucket区域", dataIndex: "bucket_zone", key: "bucket_zone" },
                    {
                        title:
                        <div>bucket容量(Mb)&nbsp;
                            <Tooltip placement='bottom' title={<div><span>按页后端查询,前端排序所选页数据</span></div>}>
                                <InfoCircleOutlined />
                            </Tooltip>
                        </div>,
                        dataIndex: "bucket_volume", key: "bucket_volume",sorter: (a, b) => a.bucket_volume - b.bucket_volume
                    },
                    { title: "事业部名称", dataIndex: "department", key: "department" },
                    {
                        title: "操作",
                        dataIndex: "operation",
                        key: "operation",
                        width: 215,
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => this.ossModal({status: true, oss_id: rowData.id})}>编辑</Action.Button>
                                        <Action.Button onClick={() => this.delete(rowData.id)}>删除</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    {
                        type: "Input",
                        label: "bucket",
                        name: "bucket_name",
                        placeholder: "请输入bucket名称"
                    },
                     {
                        type: "SelectComponent",
                        label: "所属平台",
                        url: "accountTypeList",
                        method: "get",
                        name: "platform",
                        propsKey: {
                            label: "platform",
                            value: "platform"
                        },
                        style: { width: "200px" },
                        placeholder: "请输入所属平台"
                    },
                     {
                        type: "SelectComponent",
                        label: "账号名称",
                        url: "accountList",
                        method: "get",
                        name: "account",
                        propsKey: {
                            label: "name",
                            value: "name"
                        },
                        style: { width: "200px" },
                        placeholder: "请选择账号"
                    }
                ],
                formSearchCol: 18,
                formRightCol: 6,
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){}

    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }
    // 获取弹窗子组件实例
    getOssModalRef = (ref) => { this.child = ref }
    // 显示弹窗
    ossModal = (data) => {
        console.log(data)
        this.child.visibleModal(data);
    }
    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }

    render(){
        return (
            <Fragment>
                <TableComponent onRef={this.getChildRef} batchButton={true} config={this.state.tableConfig}>
                    <Button type="primary" ref="ossAdd" onClick={() => this.ossModal({ status: true })}>添加</Button>
                </TableComponent>
                <OssModal onRef={this.getOssModalRef} />
            </Fragment>
        )
    }
}

export default OssList;